<template>
  <a-modal @ok="ok" okText="确定" cancelText="取消"
           :visible="visible" @cancel="close" title="新建权限">
    <a-radio-group style="margin-bottom: 10px" v-model="defaultValueType">
      <a-radio value="manual">手动设置</a-radio>
      <a-radio value="system">系统变量</a-radio>
    </a-radio-group>

    <Row v-if="defaultValueType === 'manual'" label="手动设置" inline :label-width="labelWidth">
      <FormField
          @update:value="v => value = v"
          @update:title="v => title = v"
          :field-config="fieldConfig"
          :auth="AuthType.edit" :value="value"
          :title="title" :comp="component"/>
    </Row>

    <Row v-else label="系统变量" inline :label-width="labelWidth">
      <a-select></a-select>
    </Row>
  </a-modal>
</template>
<script>
import FormField from '@/components/hhd/design/FormField/FormField.vue';
import {AuthType} from '@/components/hhd/design/Constants';
import Row from '@/components/hhd/design/FormDesigner/base/Row.vue';

export default {
  name: 'FieldDefaultValueSetter',
  computed: {
    AuthType() {
      return AuthType;
    }
  },
  components: {Row, FormField},
  data() {
    return {
      labelWidth: '120px',
      visible: false,
      value: undefined,
      title: undefined,
      fieldConfig: undefined,
      defaultValueType: 'manual',
      component: undefined,
    };
  },
  methods: {
    setData(data, fieldConfig) {
      this.record = data;
      this.component = fieldConfig.component;
      this.fieldConfig = fieldConfig;
      this.open();
      this.value = data.value;
      this.title = data.title;
      this.defaultValueType = data.defaultValueType || 'manual';
    },
    ok() {
      this.$emit('ok', {
        title: this.title,
        value: this.value,
        defaultValueType: this.defaultValueType,
      })
      this.close();
    },
    open() {
      this.visible = true;
      this.value = undefined;
      this.title = undefined;
    },
    close() {
      this.visible = false;
    },
  }
};
</script>